<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-page-mode" content="app"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>【66Play】一键记录你的游戏青春</title>
    <script type="text/javascript" src="__PUBLIC__/Home/mobile3/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/mobile3/js/jwplayer/jwplayer.js"></script>
    <style>
        body { padding: 0;margin: 0; width: 100%;background: transparent;}
    </style>
    <script type="text/javascript">
        window._COMMON = {
            PUBLIC : "__PUBLIC__",
        };
        window.jplay = function() {
            jwplayer().play(true);
        }
    </script>
    <style>
       #myElement_display .jwpreview{
             background-repeat:no-repeat;
             background-position:center center;
       }
    </style>
</head>

<body>
    <div id="myElement">Loading the player...</div>
</body>
</html>
<script type="text/javascript">
    var video = {$video|json_encode};
    if(window.parent.videoType==true){
          setJwplayer("16:9");
       }else{
          setJwplayer("16:16");
    }
    function  setJwplayer  (aspect) {
           jwplayer("myElement").setup({
            image: "{$video.thumb}",
            file: "{$video.uri}",
            sources : getVideoSource(video),
            title: '',
            description: "",
            controlbar: "over",  //控制条位置
            screencolor: "#fff",   //播放器颜色
            // stretching: "fill",    //画面自适应
            repeat:false,       //重复播放
            autostart:false,         //自动播放
            events:{
                onComplete: function(e){
                    if (parent) {
                        parent.playerComplete();
                    }
                },
                onSeek: function(e){
                },
                onReady: function(){
                    $("#myElement_logo").remove();
                    if (parent) {
                        parent.playerReady();
                    }
                },
                onPlay: function(){
                    if (parent) {
                        parent.playerPlay();
                    }
                },
                onPause: function(e){ 
                    if (parent) {
                        parent.playerPause();
                    }
                },
            },
            width:"100%",
            aspectratio:aspect,
        });
    }   
    function getVideoSource(video) {
        var list = [];
        if (video.dpi_levels && video.dpi_levels.length > 0) {
            $.each(video.dpi_levels, function(index, el) {
                list.push({
                    label : el.dpi,
                    file : el.uri,
                    default : false,
                });
            });
        }
        list[list.length-1].default = true;
        return list;
    }
</script>